<template>
  <div class="home">
    <div class="body">
      <div class="titles">生产领料</div>
      <el-row :gutter="20">
        <el-col :span="13">
            <div class="table-w c-left">
                <div class="sub-title">领料流水</div>
                <div class="search">
                    <div class="block">
                        <span style="display:inline">物料类型</span>
                        <el-select
                            v-model="spell"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请选择"
                            @change="changeType"
                            style="margin-left:10px;"
                        >
                            <el-option
                            v-for="item in typeOptions"
                            :key="item.ID"
                            :label="item.Name"
                            :value="item.ID"
                            ></el-option>
                        </el-select>
                    </div>
                    <div class="block">
                        <span style="display:inline">款式</span>
                        <el-select
                            v-model="styleID"
                            filterable
                            remote
                            reserve-keyword
                            placeholder="请选择"
                            :remote-method="remoteMethod"
                            @change="changeStyle"
                            style="margin-left:10px;"
                        >
                            <el-option
                            v-for="item in styleList"
                            :key="item.FlnkID"
                            :label="item.MaterielName"
                            :value="item.FlnkID"
                            ></el-option>
                        </el-select>
                    </div>
                </div>
                <el-table
                    :data="stockList.slice((currentPage - 1) * pageCount, currentPage * pageCount)"
                    :row-style="tableRowStyle"
                    :header-cell-style="tableHeaderColor"
                    highlight-current-row
                    style="width: 100%;font-size:16px"
                    height="10.8rem"
                    >
                    <el-table-column label="序号" width="60" align="center">
                        <template slot-scope="scope">{{scope.$index + 1}}</template>
                    </el-table-column>
                    <el-table-column prop="MaterielName" label="名称" align="center"></el-table-column>
                    <el-table-column prop="SpecConfigName" label="尺码/型号" width="120" align="center"></el-table-column>
                    <el-table-column prop="ColorConfigName" label="颜色/规格" width="120" align="center"></el-table-column>
                    <el-table-column prop="StockCount" label="数量" width="120" align="center"></el-table-column>
                    <el-table-column prop="TotalWeight" label="重量" width="140" align="center"></el-table-column>
                    <el-table-column prop="CuttingName" label="部位" width="120" align="center"></el-table-column>
                    <el-table-column prop="InventoryTime" label="时间" width="160" align="center">
                        <template slot-scope="scope">
                        {{$moment(scope.row.InventoryTime).format('YYYY-MM-DD HH:mm')}}
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination v-if="Math.ceil(stockList.length/pageCount) > 1"
                    background
                    layout="prev, pager, next"
                    :total="count"
                    :current-page.sync="currentPage"
                    :page-size="pageCount"
                    @current-change="changePage()"
                    style="margin:20px 0;"
                ></el-pagination>
            </div>
        </el-col>
        <el-col :span="11">
            <div class="table-w c-left" style="border:0;">
                <div class="sub-title">领料信息</div>
                <div style="font-size:40px; text-align:center;">
                    <el-radio v-model="radType" :label="1" aria-checked="true" @change="changeAtockType()">连续领料</el-radio>
                    <el-radio v-model="radType" :label="2" @change="changeAtockType()">手动领料</el-radio>
                </div>
                <div v-if="userName!==null" style="font-size:22px; margin:10px 20px;" v-html="'领料人：'+userName"></div>
                <input
                type="text"
                ref="barCode"
                @keyup.enter="barCodeEnter"
                v-model="barCode"
                style="opacity: 1;z-index=-1;"
                />
                <div class="block-w" v-show="isSearch==0">
                    <div class="block">
                        <div class="nodata">暂无数据</div>
                    </div>
                </div>
                <div class="block-w" v-show="isSearch==1">
                    <div class="block">
                    <div class="title" >
                        <div class="row">
                            <div>{{materielName}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">{{barCode}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">料号：</div>
                            <div class="des">{{materielsDetailCode}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">床次：</div>
                            <div class="des">{{bedID}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">尺码：</div>
                            <div class="des">{{specConfigName}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">颜色：</div>
                            <div class="des">{{colorConfigName}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">部位：</div>
                            <div class="des">{{partName}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">包内裁片：</div>
                            <div class="des">{{cuttingTotal}}种</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">数量：</div>
                            <div class="des">{{stockCount}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">重量：</div>
                            <div class="des">{{cuttingWeight}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">裁片类型：</div>
                            <div class="des">{{cuttingTypeName}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">订单号：</div>
                            <div class="des">{{pOCode}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">入库时间：</div>
                            <div class="des">{{stockTime}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">客户名称：</div>
                            <div class="des">{{customerName}}</div>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="block-w" v-show="isSearch==2">
                    <div class="block">
                    <div class="title">
                        <div class="row">
                            <div>{{materielName}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">{{barCode}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">料号：</div>
                            <div class="des">{{materielsDetailCode}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">型号：</div>
                            <div class="des">{{specConfigName}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">规格：</div>
                            <div class="des">{{colorConfigName}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">整包：</div>
                            <div class="des">{{stockCount}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">重量：</div>
                            <div class="des">{{cuttingWeight}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">入库时间：</div>
                            <div class="des">{{stockTime}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">客户名称：</div>
                            <div class="des">{{customerName}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">客户料号：</div>
                            <div class="des">{{partName}}</div>
                        </div>
                        <div class="row">
                            <div class="tit">订单号：</div>
                            <div class="des">{{pOCode}}</div>
                        </div>
                    </div>
                    <div class="line">
                        <div class="row">
                            <div class="tit">款式：</div>
                            <div class="des">{{styleName}}</div>
                        </div>
                    </div>
                   </div>
                </div>
            </div>
        </el-col>
      </el-row>
    </div>
    <!-- 称重弹窗 -->
    <div class="dialogBox-w" v-show="dialogCShow">
      <div class="dialogBox" style="width:500px">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="cancleDialog()" />
        </div>
        <div class="info-w">
          <div class="top">
            <div class="title">{{materielName+'领料'}}</div>
          </div>
          <div class="line" style="margin-top: 10%;margin-left: 45px;">
            <div class="row" style="width:100%;">
              <div class="ftit">请输入：</div>
              <el-input
                v-model="myStockCount"
                ref="weightInput"
                placeholder="请输入"
                style="width:140px"
              ></el-input>
              <div class="unit" v-html="isCut==1?'套':'克'"></div>
            </div>
          </div>
          <div class="send-w" style="right: 25px;">
            <div class="button" style="background:#ff6d00;border:solid 1px #ff6d00" @click="goValidity()">校称</div>
            <!-- <div class="button" @click="cancleDialog()">关闭</div> -->
            <div class="button" @click="myStockCountOK()">确定</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 校称 -->
    <div class="menuModalBox-w" v-if="swipeCardShow">
      <div class="menuModalBox">
        <div class="close">
          <div class="el-icon-circle-close icon" @click="handleClose()" />
        </div>
        <Validity :p1="type" :p2="materiel"></Validity>
      </div>
    </div>
  </div>
</template>
<script>
import Mixin from '@/components/mixin' // 混入
import Validity from '@/view/tool/validity'
import {GetStockInventoryByFilter, GetCuttingInStockDesignByStock, GetAccessoriesStockDesignByStockID, SaveJQClientOutStock
, GetProductStyle} from '@/api/prison' // 接口
export default {
  name: 'productpick',
  data () {
    return {
      typeOptions: [
            {ID: '', Name: '全部'},
            {ID: 'C', Name: '裁片'},
            {ID: 'F', Name: '辅料'}
      ],
      spell: '', // 默认类型
      stockList: [],
      count: 0,
      currentPage: 1,
      pageCount: 14, // 每页数据量
      isSearch: 0, // 是否显示  0不显示  1裁片  2辅料
      radType: 1, // 领料类型 0为未选择
      userName: localStorage.getItem('UserName'), // 领料人
      barCode: '', // 扫描后的二维码    FL202009180006
      styleName: '', // 裁片名称
      materielsDetailCode: '', // 料号
      bedID: '', // 床次号
      specConfigName: '',  // 尺码
      colorConfigName: '', // 颜色
      cuttingTotal: '', // 裁片种类
      stockCount: '', // 裁片数量
      partName: '', // 部位
      cuttingWeight: '', // 重量
      cuttingTypeName: '', // 裁片类型
      pOCode: '', // 订单号
      stockTime: '', // 订单时间
      customerName: '', // 客户名称
      dialogCShow: false, // 是否显示裁片框
      myStockCount: '', // 录入的套数
      materielName: '', // 物料名称
      mSDetailFlnkID: '', // 物料编号
      isCut: 0, // 是否裁片 0什么都不是  1裁片 2辅料
      materiel: '',
      type: '',
      swipeCardShow: false,
      styleList: [], // 款式列表
      styleID: '', // 款式数据
      styleallList: []
    }
  },
  computed: {},
  components: {
    Validity
  },
  mixins: [Mixin],
  methods: {
    // 修改table tr行的背景色
    tableRowStyle ({ row, rowIndex }) {
      return {
        backgroundColor: 'rgb(0, 63, 140)',
        color: '#fff',
        fontWeight: 'bold',
        height: '0.7rem',
        fontSize: '15px'
      }
    },
    // 修改table header的背景色
    tableHeaderColor ({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return 'background-color: rgb(0, 63, 140);color: #fff;font-weight: bold;height:0.7rem;font-size:15px'
      }
    },
    changeAtockType () {
      let vm = this
      vm.$refs.barCode.focus()
      // alert(vm.radType)
    },
    remoteMethod (query) {
      if (query !== '') {
        setTimeout(() => {
          this.styleList = this.styleallList.filter((item) => {
            return (
              item.MaterielName.indexOf(query) > -1
            )
          })
        }, 200)
      } else {
        this.styleList = this.styleallList
      }
    },
    // 选择款式
    changeStyle () {
      let vm = this
      vm.currentPage = 1
      vm.getTable()
    },
    // 选择物料类型
    changeType () {
      let vm = this
      vm.currentPage = 1
      vm.getTable()
    },
    // 分页查询
    changePage () {
      let vm = this
      vm.getTable()
    },
    // 获取表格数据
    getTable () {
      let vm = this
      let params = new FormData()
      params.append('TopNo', 200)
      params.append('MaterielType', vm.spell)
      params.append('StyleID', vm.styleID)
      params.append('OperFlnkID', localStorage.getItem('UserFlnkID'))
      GetStockInventoryByFilter(params).then((response) => {
        if (response.data.result) {
          vm.stockList = response.data.data
          vm.count = response.data.data.length
        }
      })
      vm.$nextTick(() => {
        vm.$refs.barCode.focus()
      })
    },
    // 扫码后回车
    barCodeEnter () {
      let vm = this
      // 判断是辅料还是裁片
      if (vm.barCode !== '') {
        let params = new FormData()
        params.append('StockID', vm.barCode)
        var firstLetter = vm.barCode.substr(0, 1)
        if (firstLetter === 'C' || firstLetter === 'c') {
          vm.type = 'C'
          vm.isCut = 1
          GetCuttingInStockDesignByStock(params).then((response) => {
            if (response.data.result) {
              var info = response.data.data
              if (info !== null) {
                vm.styleName = info.StyleName
                vm.materielsDetailCode = info.MaterielsDetailCode
                vm.bedID = info.BedID
                vm.specConfigName = info.SpecConfigName
                vm.colorConfigName = info.ColorConfigName
                vm.cuttingTotal = info.CuttingTotal
                vm.stockCount = info.StockCount
                vm.partName = info.PartName
                vm.cuttingWeight = info.CuttingWeight
                vm.cuttingTypeName = info.CuttingTypeName
                vm.pOCode = info.POCode
                vm.stockTime = info.StockTime
                vm.customerName = info.CustomerName
                vm.materielName = info.MaterielName
                vm.materiel = vm.mSDetailFlnkID = info.MSDetailFlnkID

                vm.isSearch = 1
                    // 裁片
                var strCount = vm.stockCount
                var reg = /[\u4e00-\u9fa5]/g
                vm.myStockCount = strCount.replace(reg, '')
                if (vm.myStockCount === 0 || vm.myStockCount === '0') {
                  vm.$message('物料数为0,不能领料')
                  return
                }
                if (vm.radType === 1) {
                        // 连续领料  直接入库
                  vm.myStockCountOK()
                } else if (vm.radType === 2) {
                        // 手动领料 录入值入库  弹出套件数量
                  vm.dialogCShow = true
                  vm.$nextTick(() => {
                    vm.$refs.weightInput.focus()
                  })
                }
              }
            }
          })
        } else if (firstLetter === 'F' || firstLetter === 'f') {
          vm.type = 'F'
          vm.isCut = 2
          GetAccessoriesStockDesignByStockID(params).then((response) => {
            if (response.data.result === 1 && response.data.data.length > 0) {
              var info = response.data.data[0]
              if (info !== null) {
                vm.styleName = info.StyleName
                vm.materielsDetailCode = info.MaterielsDetailCode
                  // vm.bedID = info.BedID
                vm.specConfigName = info.SpecConfigName
                vm.colorConfigName = info.ColorConfigName
                  // vm.cuttingTotal = info.CuttingTotal
                vm.stockCount = info.StockCount
                vm.partName = info.CustomerBomID
                vm.cuttingWeight = info.FLWeight
                  // vm.cuttingTypeName = info.CuttingTypeName
                vm.pOCode = info.POCode
                vm.stockTime = info.StockTime
                vm.customerName = info.CustomerName
                vm.materielName = info.MaterielName
                vm.materiel = vm.mSDetailFlnkID = info.MSDetailFlnkID

                vm.isSearch = 2
                  // 裁片
                var strCount = vm.cuttingWeight
                var reg = /[\u4e00-\u9fa5]/g
                vm.myStockCount = parseFloat(strCount.replace(reg, '')).toFixed('0.0000')
                  // alert(vm.myStockCount)
                if (vm.myStockCount === 0 || vm.myStockCount === '0') {
                  vm.$message('物料数为0,不能领料')
                  return
                }
                if (vm.radType === 1) {
                        // 连续领料  直接入库
                  vm.myStockCountOK()
                } else if (vm.radType === 2) {
                        // 手动领料 录入值入库  弹出数量
                  vm.dialogCShow = true
                  vm.$nextTick(() => {
                    vm.$refs.weightInput.focus()
                  })
                }
              }
            }
          })
        }
        // vm.barCode = ''
      }
    },
    // 刷新物料数据
    updateDataByID () {
      let vm = this
      // 判断是辅料还是裁片
      if (vm.barCode !== '') {
        let params = new FormData()
        params.append('StockID', vm.barCode)
        var firstLetter = vm.barCode.substr(0, 1)
        if (firstLetter === 'C' || firstLetter === 'c') {
          vm.isCut = 1
          vm.type = 'C'
          vm.styleName = ''
          vm.materielsDetailCode = ''
          vm.bedID = ''
          vm.specConfigName = ''
          vm.colorConfigName = ''
          vm.cuttingTotal = ''
          vm.stockCount = ''
          vm.partName = ''
          vm.cuttingWeight = ''
          vm.cuttingTypeName = ''
          vm.pOCode = ''
          vm.stockTime = ''
          vm.customerName = ''
          vm.materielName = ''
        //   GetCuttingInStockDesignByStock(params).then((response) => {
        //     if (response.data.result) {
        //       var info = response.data.data
        //       if (info !== null) {
        //         vm.styleName = info.StyleName
        //         vm.materielsDetailCode = info.MaterielsDetailCode
        //         vm.bedID = info.BedID
        //         vm.specConfigName = info.SpecConfigName
        //         vm.colorConfigName = info.ColorConfigName
        //         vm.cuttingTotal = info.CuttingTotal
        //         vm.stockCount = info.StockCount
        //         vm.partName = info.PartName
        //         vm.cuttingWeight = info.CuttingWeight
        //         vm.cuttingTypeName = info.CuttingTypeName
        //         vm.pOCode = info.POCode
        //         vm.stockTime = info.StockTime
        //         vm.customerName = info.CustomerName
        //         vm.materielName = info.MaterielName
        //       }
        //     }
        //   })
        } else if (firstLetter === 'F' || firstLetter === 'f') {
          vm.type = 'F'
          vm.isCut = 2
          vm.styleName = ''
          vm.materielsDetailCode = ''
          vm.specConfigName = ''
          vm.colorConfigName = ''
          vm.stockCount = ''
          vm.partName = ''
          vm.cuttingWeight = ''
          vm.pOCode = ''
          vm.stockTime = ''
          vm.customerName = ''
          vm.materielName = ''
          vm.materiel = vm.mSDetailFlnkID = ''
        //   GetAccessoriesStockDesignByStockID(params).then((response) => {
        //     if (response.data.result === 1 && response.data.data.length > 0) {
        //       var info = response.data.data[0]
        //       if (info !== null) {
        //         vm.styleName = info.StyleName
        //         vm.materielsDetailCode = info.MaterielsDetailCode
        //         vm.specConfigName = info.SpecConfigName
        //         vm.colorConfigName = info.ColorConfigName
        //         vm.stockCount = info.StockCount
        //         vm.partName = info.CustomerBomID
        //         vm.cuttingWeight = info.FLWeight
        //         vm.pOCode = info.POCode
        //         vm.stockTime = info.StockTime
        //         vm.customerName = info.CustomerName
        //         vm.materielName = info.MaterielName
        //         vm.materiel = vm.mSDetailFlnkID = info.MSDetailFlnkID
        //       }
        //     }
        //   })
        }
      }
    },
    myStockCountOK () {
      let vm = this
      let params = new FormData()
      debugger
      params.append('StockID', vm.barCode)
      params.append('StyleCount', vm.isCut === 1 ? vm.myStockCount : 0)
      params.append('Weight', vm.isCut === 2 ? vm.myStockCount : 0)
      params.append('IsAuto', vm.radType === 1 ? 1 : 0)
      params.append('OperFlnkID', localStorage.getItem('UserFlnkID'))
      SaveJQClientOutStock(params).then((response) => {
        if (response.data.result === 1) {
          vm.dialogCShow = false
          if (vm.radType === 1) {
            vm.$message('连续领料成功')
          } else {
            vm.$message('手动领料成功')
          }
          vm.$nextTick(() => {
            vm.$refs.barCode.focus()
          })
          vm.getTable()
          vm.updateDataByID()
          vm.barCode = ''
        } else {
          vm.$message(response.data.error)
        }
      })
    },
    // 关闭弹出框
    cancleDialog () {
      let vm = this
      vm.$nextTick(() => {
        vm.$refs.barCode.focus()
      })
      vm.dialogCShow = false
    },
    goValidity () {
      this.swipeCardShow = true
    },
    handleClose () {
      let vm = this
      this.swipeCardShow = false
      vm.$nextTick(() => {
        vm.$refs.barCode.focus()
      })
      if (this.type && this.materiel) {
        // this.getInfo()
      }
    },
    // 获取款式数据
    getProductStyle () {
      let vm = this
      GetProductStyle().then((response) => {
        if (response.data.result === 1) {
          vm.styleList = response.data.data
          vm.styleallList = response.data.data
        } else {
          vm.$message(response.data.error)
        }
      })
    }
  },
  watch: {},
  mounted () {
    let vm = this
    vm.getProductStyle()
    vm.getTable()
    vm.$nextTick(() => {
      vm.$refs.barCode.focus()
    })
    if (this.$route.query.type && this.$route.query.materiel) {
      this.type = this.$route.query.type
      this.materiel = this.$route.query.materiel
    }
  },
  beforeDestroy: function () {}
}
</script>
<style lang="scss" scoped>
@import "~@/css/lcheck/product.scss";
</style>
<style lang="scss">
.table-w {
   .el-input__inner {
    background: #002752;
    color: #fff;
  }
  .el-radio__inner {
    width: 20px;
    height: 20px;
    &::after {
      width: 5px;
      height: 5px;
    }
  }
  .el-radio__label {
    color: #fff;
    font-size: 28px;
  }
}
</style>